<template>
  <!-- 增加或减少食物控件 -->
  <div class="control">
    <!-- @click.stop阻止事件冒泡 由内到外 -->
    <i class="icon icon-remove_circle_outline" @click.stop="delNum" v-if="foodsNum"></i>
    <span class="num" v-if="foodsNum">{{foodsNum}}</span>
    <i class="icon icon-add_circle" @click.stop="addNum"></i>
  </div>
</template>

<script>
  import { mapMutations } from 'vuex'
  export default {
    data() {
      return {
        foodsNum: 0
      }
    },
    computed: {
      // ...mapState(['buyFoodsData'])
    },
    props: {
      typeName: {
        type: String,
        required: true
      },
      // foodsName: {
      //   type: String,
      //   required: true
      // },
      // foodsPrice: {
      //   type: Number,
      //   required: true
      // },
      foodsItem: {
        type: Object,
        required: true
      }
    },
    methods: {
      ...mapMutations({buyFoodsDataX: 'BUYFOODS_DATA'}),
      addNum() {
        this.foodsNum++
        // this.$emit('addFoodsFn')s
        // console.log('add', this.typeName, this.foodsName, this.foodsPrice, this.foodsNum)
        // let foodsData = {
        //   foodsName: this.foodsName,
        //   foodsPrice: this.foodsPrice,
        //   foodsNum: this.foodsNum
        // }
        // let data = {
        //   typeName: this.typeName,
        //   foodsData
        // }
        let data = {
          typeName: this.typeName,
          foodsName: this.foodsItem.name,
          foodsPrice: this.foodsItem.price,
          foodsNum: this.foodsNum,
          foodsItem: this.foodsItem
        }
        this.buyFoodsDataX(data)
      },
      delNum() {
        this.foodsNum--
        // this.$emit('delFoodsFn')
        // console.log('del', this.typeName, this.foodsName, this.foodsPrice, this.foodsNum)
        let data = {
          typeName: this.typeName,
          foodsName: this.foodsItem.name,
          foodsPrice: this.foodsItem.price,
          foodsNum: this.foodsNum,
          foodsItem: this.foodsItem
        }
        this.buyFoodsDataX(data)
      }
    }
  }
</script>

<style lang="sass" scoped>
.control
  display: inline-block
  .icon
    display: inline-block
    vertical-align: middle
    font-size: 48rpx
    // line-height: 48rpx
    color: rgba(0, 160, 220, 1)
    &:nth-of-type(1)
      // transform: translateX(-48rpx)
    // &:nth-of-type(1)
    //   animation: run 0.5s
    //   @keyframes run
    //     from
    //       transform: translateX(0rpx)
    //     to
    //       transform: translateX(-48rpx)
  .num
    display: inline-block
    width: 48rpx
    font-size: 20rpx
    // line-height: 40rpx
    text-align: center
    color: rgba(147, 153, 159, 1)
</style>
